<template>
  <cube-page type="validator-view" title="学情管理--批阅作业" desc>
    <div slot="content">
      <!--  老师查看某个班级的学生作业情况 -->
      <div class="stu-list swipe-wrapper">
        <!-- <h1 class="title">学情管理--批阅作业</h1> -->
        <cube-select
          v-if="options.length>1"
          v-model="value"
          :title="title"
          :options="options"
          :placeholder="placeholder"
          :auto-pop="autoPop"
          :disabled="disabled"
          @change="change"
        ></cube-select>
        <h5 class="className" v-if="options.length===1">{{options[0].text}}</h5>
        <cube-tab-bar
          v-model="selectedLabel"
          show-slider
          :use-transition="disabled"
          ref="tabNav"
          :data="tabLabels"
        ></cube-tab-bar>
        <div class="tab-slide-container">
          <cube-slide
            ref="slide"
            :loop="loop"
            :initial-index="initialIndex"
            :auto-play="autoPlay"
            :show-dots="showDots"
            :options="slideOptions"
            @scroll="scroll"
            @change="changePage"
          >
            <!-- 未完成-->
            <cube-slide-item>
              <cube-scroll v-if="allData.length>0" :data="allData" :options="scrollOptions">
                <ul class="list-wrapper">
                  <li class="tab-panel-li" v-for="(hero, index) in allData" :key="index">
                    <div class="item-inner">
                      <div class="text">
                        <h2 class="item-name" v-html="hero.name"></h2>
                        <!-- <p
                          class="item-time"
                        >作业内容:&nbsp;{{$route.query.bookName}}{{$route.query.pages}}</p>-->
                        <p class="item-time">截止日期:&nbsp;{{hero.end_time | formatDate}}</p>
                      </div>
                      <div class="icon">
                        <p class="item-status item-undo">学生未完成</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </cube-scroll>
              <div v-if="allData.length==0" class="tips">
                <div class="tips-icon">
                  <i class="cubeic-alert"></i>
                </div>
                <h3>暂无未完成的作业学生</h3>
              </div>
            </cube-slide-item>
            <!-- 未批阅 -->
            <cube-slide-item>
              <cube-scroll v-if="undoData.length>0" :data="undoData" :options="scrollOptions">
                <ul class="list-wrapper">
                  <li class="tab-panel-li" v-for="(hero, index) in undoData" :key="index">
                    <div @click="onItemClick(hero, index)" class="item-inner">
                      <div class="text">
                        <h2 class="item-name" v-html="hero.name"></h2>
                        <!-- <p class="item-time">作业内容:&nbsp;{{hero.bookName}}{{hero.pages}}</p> -->
                        <p class="item-time">完成日期:&nbsp;{{hero.updateTime | formatDate }}</p>
                      </div>
                      <div class="icon">
                        <p class="item-status item-puneva">未批阅</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </cube-scroll>
              <div v-if="undoData.length==0" class="tips">
                <div class="tips-icon">
                  <i class="cubeic-alert"></i>
                </div>
                <h3>暂无未批阅的作业！</h3>
              </div>
            </cube-slide-item>
            <!-- 已批阅 -->
            <cube-slide-item>
              <cube-scroll v-if="doneData.length>0" :data="doneData" :options="scrollOptions">
                <ul class="list-wrapper">
                  <li class="tab-panel-li" v-for="(hero, index) in doneData" :key="index">
                    <div @click="onItemClick(hero, index)" class="item-inner">
                      <div class="text">
                        <h2 class="item-name" v-html="hero.name"></h2>
                        <!-- <p class="item-time">作业内容:&nbsp;{{hero.bookName}}{{hero.pages}}</p> -->
                        <p class="item-time">完成日期:&nbsp;{{hero.updateTime|formatDate}}</p>
                      </div>
                      <div class="icon">
                        <p class="item-status item-alldone">已批阅</p>
                        <p class="item-status item-golden" v-if="hero.teacherEvaluate=='0'">
                          优秀
                          <i class="cubeic-vip"></i>
                        </p>
                        <p class="item-status item-blue" v-else-if="hero.teacherEvaluate=='1'">
                          良好
                          <i class="cubeic-good"></i>
                        </p>
                        <p class="item-status item-red" v-else-if="hero.teacherEvaluate=='2'">
                          不合格
                          <i class="cubeic-bad"></i>
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </cube-scroll>
              <div v-if='doneData.length==0' class="tips">
                <div class="tips-icon">
                  <i class="cubeic-alert"></i>
                </div>
                <h3>暂无已批阅的作业</h3>
              </div>
            </cube-slide-item>
          </cube-slide>
        </div>
      </div>
    </div>
  </cube-page>
</template>

<script>
import CubePage from "@/components/cube-page.vue";
import { formatDate } from "@/assets/js/date.js";
export default {
  name: "StuList",
  components: {
    CubePage
  },
  filters: {
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  },
  data() {
    return {
      options: [],
      value: "",
      title: "班级",
      placeholder: "请选择班级",
      currentGradeID: "", //当前选中的班级id
      autoPop: false,
      selectedLabel: "未批阅",
      disabled: false,
      tabLabels: [
        {
          label: "未完成",
          status: "0"
        },
        {
          label: "未批阅",
          status: "1"
        },
        {
          label: "已批阅",
          status: "2"
        }
      ],
      loop: false,
      autoPlay: false,
      showDots: false,
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        /* lock y-direction when scrolling horizontally and  vertically at the same time */
        directionLockThreshold: 0
      },
      scrollOptions: {
        /* lock x-direction when scrolling horizontally and  vertically at the same time */
        directionLockThreshold: 0
      },
      allData: [],
      undoData: [],
      doneData: []
    };
  },
  computed: {
    initialIndex() {
      let index = 0;
      index = this.findIndex(
        this.tabLabels,
        item => item.label === this.selectedLabel
      );
      return index;
    }
  },
  created() {
    let requestData = {
      openId: localStorage.getItem("openID"),
      homeworkId: this.$store.state.homeworkId
    };
    this.$http
      .post("/api000021", requestData)
      .then(response => {
        // 获取班级名称和id
        this.options = response.data.map(item => {
          return { text: item.gradeStr, value: item.id };
        });
        // 设置选中项的value
        if (this.options.length > 1) {
          // 设置选择器被选中的项
          this.value = this.options[0].text;
        }

        this.currentGradeID = this.options[0].value;
        this.changePage(1, this.currentGradeID);
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  mounted() {},
  methods: {
    // 根据状态和班级id，获取学生作业列表
    getGradeJobs(url, data) {
      this.$http
        .post(url, data)
        .then(response => {
          if (data.status == "0") {
            let responseData = response.data;
            this.allData = responseData; //未完成
          } else if (data.status == "1") {
            let responseData = response.data;
            this.undoData = responseData; // 未批阅
          } else if (data.status == "2") {
            let responseData = response.data;
            this.doneData = responseData; //已批阅
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    findIndex(ary, fn) {
      if (ary.findIndex) {
        return ary.findIndex(fn);
      }
      /* istanbul ignore next */
      let index = -1;
      /* istanbul ignore next */
      ary.some(function(item, i, ary) {
        const ret = fn.call(this, item, i, ary);
        if (ret) {
          index = i;
          return ret;
        }
      });
      /* istanbul ignore next */
      return index;
    },
    change(value, index) {
      // 切换班级
      this.currentGradeID = this.options[index].value;
      for (let i = 0; i < 3; i++) {
        this.changePage(i, this.currentGradeID);
      }
    },
    onItemClick(item) {
      this.$store.state.studentId = item.id;
      this.$router.push({
        path: "/teacherjob",
        query: item
      });
    },
    changePage(current) {
      this.selectedLabel = this.tabLabels[current].label;
      let requetData = {
        openId: localStorage.getItem("openID"),
        gradId: this.currentGradeID,
        homeworkId: this.$store.state.homeworkId,
        status: this.tabLabels[current].status
      };
      this.getGradeJobs("/api000024", requetData);
    },
    scroll(pos) {
      const x = Math.abs(pos.x);
      const tabItemWidth = this.$refs.tabNav.$el.clientWidth;
      const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth;
      const deltaX = (x / slideScrollerWidth) * tabItemWidth;
      this.$refs.tabNav.setSliderTransform(deltaX);
    }
  }
};
</script>

<style lang="scss">
.stu-list {
  .title {
    font-size: 16px;
    font-weight: 700;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    border-left: 5px solid #fc9153;
    background: #fee9dd;
  }
  .className {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin: 15px;
  }
  // 设置tab的样式
  .cube-tab div {
    font-size: 16px;
    font-weight: 700;
  }
  .item-inner {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin: 20px;
    padding-bottom: 20px;
    height: 40px;
    border-bottom: 5px solid rgb(233, 233, 233);
    .text {
      /* 老师作业列表或学生作业列表每个作业信息框的样式 */

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .item-name {
        font-size: 16px;
        font-weight: 700;
      }
    }
    .icon {
      align-self: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      .item-status {
        padding: 5px 10px;
      }
      /* 设置优秀字体颜色 */
      .item-golden {
        color: goldenrod;
      }
      /* 设置良好字体颜色 */
      .item-blue {
        color: blue;
      }

      /* 设置不合格字体颜色 */
      .item-red {
        color: red;
      }
      .item-undo {
        color: red;
      }
      .item-puneva {
        color: rgb(189, 58, 58);
      }
      /* /已完成字体样式 */
      .item-alldone {
        color: black;
        text-align: right;
      }
    }
  }
  .tips {
    margin-top: 40%;
    text-align: center;
    font-size: 16px;
    color: #fc9153;
    .tips-icon {
      margin-bottom: 20px;
      i {
        color: #fc9153;
        font-size: 50px;
      }
    }
  }
}
</style>
